<!--跟课情况查询-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-container-item right20">
        <div class="item-name">学期：</div>
        <el-select v-model="dataForm.xueqi" placeholder="请选择" style="width: 110px" size="mini">
          <el-option v-for="item in xq" :key="item.id" :label="item.xqmc" :value="item.xqmc"></el-option>
        </el-select>
      </div>
      <div class="right20">
        <span class="item-name">日期：</span>
        <el-date-picker class="time"  v-model="dataForm.ksrq" type="date" value-format="yyyy-MM-dd"></el-date-picker>
        <span class="item-hr">-</span>
        <el-date-picker  class="time" v-model="dataForm.jsrq" type="date" value-format="yyyy-MM-dd"></el-date-picker>
      </div>
      <div class="search-container-item right20">
        <div class="item-name">周次：</div>
        <el-select v-model="dataForm.zhouci" placeholder="请选择" style="width: 110px" size="mini">
          <el-option v-for="item in zcList" :key="item.zhouci" :label="item.zhouci" :value="item.zhouci"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right20">
        <div class="item-name">人员类别：</div>
        <el-select v-model="dataForm.roleId" placeholder="请选择" style="width: 110px" size="mini">
          <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="search-button color-primary width70" @click="initList">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column label="应跟" align="center">
            <el-table-column prop=" gzr" label="工作日" align="center"></el-table-column>
            <el-table-column prop="mtgkks" label="每天跟课课时" align="center"></el-table-column>
            <el-table-column prop="ygzks" label="总课时" align="center">
                <template slot-scope="scope">
                    <span class="count-css" @click="jumpDetail">{{scope.row.ygzks}}</span>
                </template>
            </el-table-column>
        </el-table-column>
        <el-table-column label="实跟" align="center">
            <el-table-column prop="sgzks" label="总课时" align="center"></el-table-column>
        </el-table-column>
        <el-table-column label="核减情况" align="center" >
            <el-table-column prop="ccsj" label="出差时间" align="center"></el-table-column>
            <el-table-column prop="hjts" label="核减天数" align="center"></el-table-column>
            <el-table-column prop="hjks" label="核减课时" align="center"></el-table-column>
        </el-table-column>
        <el-table-column prop="zhishu" label="指数" align="center"></el-table-column>
        <el-table-column prop="sfdb" label="是否达标" align="center"></el-table-column>
      </el-table>
      <h1 class="total-notice">当前共找到{{total}}条记录，当前显示{{(dataForm.current-1)*50 == 0?1:(dataForm.current-1)*50}}-{{total>50?dataForm.current*50:total}}条</h1>
    </div>
    <div class="pagination-block">
      <el-pagination prev-text="上一页" next-text="下一页" :page-size="50" v-if="total>50" @current-change="currentPage"
        layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {dataFollowList,roleList} from "@/api/lineData";
export default {
  data() {
    return {
      total:1,
      xq:[],
      roleList:[],//学员队列表
      dataForm:{
        xueqi:'',//学期
        ksrq:'',//开始日期
        jsrq:'',//结束日期
        zhouci:'全部',//周次
        roleId:'',//人员类别
        current:1,
        size:50
      },
      tableData: [],
      zcList:[],
      xueqiID:'',
    };
  },
  mounted(){
    this.getRole()
    //学期列表
    this.commonApi.getXQOption().then(res=>{
      this.xq = res.data;
      this.commonApi.getCurrentXQ().then(mes=>{
        this.dataForm.xueqi = mes.data.xqmc;
        this.xueqiID = mes.data.xqmc;
        this.initList();
      })
    })
    //获取周次
    this.commonApi.getWeeks({riqi:'',xueqi:''}).then(res=>{
      this.zcList = [{zhouci:'全部'},...res.data.termRemarksList]
    })
  },
  methods: {
    currentPage(e){
      this.dataForm.current = e;
      this.initList()
    },
    async getRole(){
      let res = await roleList();
      this.roleList = res.data;
      this.dataForm.roleId = res.data[0].id
    },
    //初始化表格
    async initList(){
      let params = {
          ...this.dataForm,
          zhouci:this.dataForm.zhouci == '全部'?'':this.dataForm.zhouci
        }
      let res = await dataFollowList(params);
      if(res.code == 200){
        this.tableData = res.data.records;
        this.total = res.data.total
      }
    },
    //跳转一线数据查询
    jumpDetail(id){
      this.$router.push({
          path:'/teaching/graduationStudent/detail',
          query:{
            id:id
          }
      })
    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.right20{margin-right: 20px;}
.width70{width: 70px;}
.search-container {
  justify-content: flex-start !important;
  position: relative;
}
.time{
  /deep/.el-input__inner{
          height: 28px;
          line-height: 28px;
          font-size: 12px;
      }
      /deep/.el-input__icon{
          font-size: 20px;
          margin-top: -4px;
      }
      /deep/.el-input__prefix{
          right: 16px;
      }
}
.count-css{
    padding: 0 10px;
    cursor: pointer;
    display: inline-block;
    border-bottom: 1px solid #004CA7;
}
.total-notice{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004CA7;
    margin-top:10px
}
</style>
